<!DOCTYPE html>
<html>

<head>
  <title>Twilio Video - Video Quickstart</title>
  <link rel="stylesheet" href="index.css">
</head>

<body>
  <div id="remote-media"></div>
  <div id="controls">
    <div id="preview">
      <p class="instructions">Hello Beautiful</p>
      <div id="local-media"></div>
      <button id="button-preview">Preview My Camera</button>
    </div>
    <div id="identity-controls">
      <p class="instructions">Name:</p>
      <input id="identity" type="text" placeholder="Enter your name" />
      <button id="identity-connect">Connect</button>
    </div>
    <div id="room-controls">
      <p class="instructions">Room Name:</p>
      <input id="room-name" type="text" placeholder="Enter a room name" />
      <button id="button-join">Join Room</button>
      <button id="button-leave">Leave Room</button>
      <button id="button-share-screen">Share screen</button>
      <button id="button-unshare-screen">Unshare screen</button>
    </div>
    <div id="log"></div>
  </div>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="index.js"></script>
</body>

</html>